Slides
The slides section allows you to add an unlimited number of slides to the slider. Each slide has the following settings
Setting:
Background Image
| Option | Value | Description |
|---|---|---|
| Background Image | Image | Select the background image that will be display for the slide |
| Slide Background Color | HEX Color | This will be the background color used for mobile OR if the background is not set to cover. |
| Background Image display | Option | The background image display allows you to select how the background image will display. Using the options of Cover or Contain. Cover will maintain the aspect ratio of the image but cover the available space. This option does crop the image at times but typically gives a better overall experience. The contain option will contain the image, while maintaining the aspect ratio. This will cause the image to shrink to fix the area. |
| Background Repeat | Option | The background repeat option, allows you to set if the background image should 'repeat' or not. Valid options are none, repeat horizontal or vertical. |
| Show background image on mobile | Yes / No | When set to yes, the background image will be displayed on smaller screens. When set to no, the background image will not be displayed and the background color will be shown. |
The background color will be used for mobile OR if the background is not set to cover. If the show background on mobile is set to no, ensure you have set the background image color, as this will be used on smaller devices
Text Area
| Option | Value | Description |
|---|---|---|
| Heading | Text | The heading text will display over the background image and above the subtext |
| Heading Class | Class | This section allows you to add a class to the heading text |
| Heading line height | Number | This value allows you to set the line height for the heading. (padding under the main h1 heading) |
| Subtext | Text | The subtext will display under the heading and should be descriptive of what the slide represents |
| Subtext Class | Class | This option allows yo to add a class to the subtext section |
| Heading Color | Hex Color | The heading color option allows you to set the text color for the heading. This should be a high contrast color to ensure visibility against the background image / color. |
| Sub text Color | Hex Color | The Sub Text color option allows you to set the text color for the Sub Text. This should be a high contrast color to ensure visibility against the background image / color. |
| Word Break | Option | The word break has two options. No Break and Break. (default is no break) When set, to 'Break' word will break to a new line and retain the full word. By default, the break will attempt to contain the words inside the containers width. |
The word break option can, at times cause parts of words to drop to a new line, depending on the length and the setting selected. It's important to choose the right setting for how you wish to display text.
The slider container now has a non-declaired class called slideContentBoxAlt to allow for extra targeting. This allows you to define extra css in the CSS section to target the slider.
The heading and subtext areas do allow you to put in basic HTML tags, allowing you to use things like BR or LI tags to better format. While you can add html, ensure it does not break the layout. We cannot guarantee added html will not impact the responsiveness of the slide
When adding the text, ensure you are not being overly wordy. Text that is very long will create a scroll area so take care to make the text as concise as possible.
Text Area - Buttons
| Option | Value | Description |
|---|---|---|
| Button Text | Text | The text that will display in the button. |
| Button URL | Text | The URL that the button will go to when clicked on. |
| Button Class | Class | This option allows you to add a class to the button |
| Background Color | Hex Color | The background color of the button. |
| Hover Color | Hex Color | This will be the color of the background when a mouse if hovered over the button. |
| Text Color | Hex Color | This will be the color of the text when in a non-active state |
| Text Hover Color | Hex Color | This will be the color of the text when a mouse if hovered over the text. |
Text Alignment
| Option | Value | Description |
|---|---|---|
| Text Alignment | Option | The text alignment option allows you to set how the text overlay should align. The options are |
| Text area size Large | Number | The text area size large allows you to set how much of the container you wish the text area to cover on large screens. For example, setting this to 100% will cover the entire area, 50% will cover half etc. |
| Text area size Medium | Number | The text area size medium allows you to set how much of the container you wish the text area to cover on medium screens. For example, setting this to 100% will cover the entire area, 50% will cover half etc. |
| Text area size Small | Number | The text area size small allows you to set how much of the container you wish the text area to cover on small screens. For example, setting this to 100% will cover the entire area, 50% will cover half etc. |
Text area size is determined by the alignment option. For example, left aligned will be 50% of a left alignment, where a center alignment will always be center aligned and the container box will be the width set based off the center of the object.
When setting the text area size, it is important to test different response size to ensure the text is visible on all screen sizes.